<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <video controls=""></video>
  <script>
    var video = document.querySelector('video');

    var assetURL = 'http://25.30.14.84:81/fmp4/test-hev1-f.mp4';
    // Need to be specific for Blink regarding codecs
    // ./mp4info frag_bunny.mp4 | grep Codec
    var mimeCodec = 'video/mp4; codecs="hev1"';

    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
      var mediaSource = new MediaSource;
      //console.log(mediaSource.readyState); // closed
      video.src = URL.createObjectURL(mediaSource);
      mediaSource.addEventListener('sourceopen', sourceOpen);
    } else {
      console.error('Unsupported MIME type or codec: ', mimeCodec);
    }

    function sourceOpen(e) {
      //console.log(this.readyState); // open
      var mediaSource = e.target;
      var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
      fetchAB(assetURL, function (buf) {
        sourceBuffer.addEventListener('updateend', function (_) {
          mediaSource.endOfStream();
          video.play();
          //console.log(mediaSource.readyState); // ended
        });
        console.log("buf", buf);
        sourceBuffer.appendBuffer(buf);
      });
    };

    function fetchAB(url, cb) {
      console.log(url);
      var xhr = new XMLHttpRequest;
      xhr.open('get', url);
      xhr.responseType = 'arraybuffer';
      xhr.onload = function () {
        cb(xhr.response);
      };
      xhr.send();
    };
  </script>
</body>

</html>